<template>
  <el-transfer
      filterable
      :filter-method="filterMethod"
      :filter-placeholder="placeholder"
      v-model="value2"
      :data="data2"
      :titles="titles"
      @change="valueChange"
      >
   </el-transfer>
</template>

<script>
export default {
  name: "common_button",
  props: {
    rawData: Object,
    field: String,
    type: String,
    select: Array,
    titles: Array,
    placeholder: String
  },
  data() {
    const generateData = _ => {
      const tmp = [];
      const options = this.rawData[this.field];
      var options_name = [];

      if (isNoEmpty(options)) {
        for (let i = 0; i < options.length; i++) {
          if (this.type == "noSet") {
            options_name.push(options[i].name);
          } else {
            options_name.push(getValueByKey(this.type, options[i]));
          }
        }
      }

      options_name.forEach((name, index) => {
        var val = "";
        if (this.type == "noSet") {
          val = options[index].id;
        } else {
          val = options[index];
        }

        tmp.push({
          label: name,
          key: val,
          pinyin: options_name[index]
        });
      });
      return tmp;
    };
    return {
      data2: generateData(),
      value2: this.select,
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      selection: []
    };
  },
  mounted() {},

  watch: {},

  methods: {
    valueChange(currVal, direction, movedKeys) {
      var list = this.rawData[this.field];
      var selectData = [];

      for (let i = 0; i < list.length; i++) {
        for (let k = 0; k < currVal.length; k++) {
          if (list[i] == currVal[k] || list[i].id == currVal[k]) {
            selectData.push(list[i]);
          }
        }
      }
      this.$emit("transfer", selectData);
      this.selection = currVal;
    }
  }
};
</script>

<style scoped >
.el-transfer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wl-input-item {
  width: 600px;
}

</style>
